import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import styles from './Home.less';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
import Trend from '@/components/Trend';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 20 },
};

const IntroduceRow = memo(({ loading, visitData, visitItem, questionItem }) => (
  <Row gutter={2}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={'访客数量'}
        action={<img src={require('../../assets/icons/1.png')} alt='' />}
        total={visitData ? visitData.visit.num : 0}
        contentHeight={46}
      >
        <MiniArea line={visitItem.length === 0} borderColor='#975FE4' color="#975FE4" data={visitData ? visitData.visit.spread : []} />
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={'问答数量'}
        action={<img src={require('../../assets/icons/2.png')} alt='' />}
        total={visitData ? visitData.question.num : 0}
        contentHeight={46}
      >
        {
          questionItem.length === 0 ?
            <MiniArea line data={visitData ? visitData.question.spread : []} />
            :
            <MiniBar data={visitData ? visitData.question.spread : []} />
        }
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title={'问答回复率'}
        action={<img src={require('../../assets/icons/3.png')} alt='' />}
        total={visitData ? visitData.answerRatio + "%" : 0}
        contentHeight={46}
      >
        <MiniProgress
          percent={visitData ? visitData.answerRatio : 0}
          strokeWidth={8}
          target={visitData ? visitData.answerRatio : 0}
          targetLabel={`${visitData ? visitData.answerRatio + "%" : 0}`}
          color="#13C2C2"
        />
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={'未知问题数'}
        action={<img src={require('../../assets/icons/4.png')} alt='' />}
        loading={loading}
        total={visitData ? visitData.unknown.num : 0}
        contentHeight={46}
      >
        <MiniArea line height={45} data={visitData ? visitData.unknown.spread : [{ x: [], y: [] }]} />
      </ChartCard>
    </Col>
  </Row>
));

export default IntroduceRow;
